<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dom-节点操作</title>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
        <a href="#">链接1</a>
        <a href="#">链接1</a>
        <a href="#" id="link">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接3</a>
        <a href="#">链接3</a>
      </div>
    </div>

    <script>
      /* 一.父元素 parentNode */
      console.log(link.parentNode.parentNode)

      /*
         二.子元素
         childNodes    不推荐,获取子节点,但是包含元素节点和文本节点,一般只要元素节点
         firstChild/lastChild  不推荐

         children      推荐,获取当前元素的所有子节点
         firstElementChild/lastElementChild      获取第一个子节点/最后一个子节点
       */
      console.log(inner.children)
      console.log(inner.firstElementChild)
      console.log(inner.lastElementChild)

      /*
         三.兄弟节点
         previousSibling/nextSibling  不推荐

        previousElementSibling/nextElementSibling   推荐,获取前一个或者后一个兄弟节点
       */
      console.log(link.previousElementSibling)
      console.log(link.nextElementSibling)
    </script>
  </body>
</html>
